import React, { useContext } from 'react'
import Item from './Item'
import Blank from './Blank'
import { TodoContext } from '../../todoContext'


function List() {
    const { list } = useContext(TodoContext);
    let listContent = list.length ? <ul>{list.map(item => <Item
        key={item.id}
        detail={item}
    />)}</ul> : <Blank />;
    return (
        <div className='list-wrapper'>
            {listContent}
        </div>
    )
}

export default List
